<script>
export default {
  name: "headerNavigationBar",
  props: {
    headerList: {
      type: Array,
      default: []
    },
    // 是否选中
    headerIndex: {
      type: Number,
      default: 0
    }
  },
  methods: {
    selectIndex(index){
      this.$emit('selectIndex', index)
    }
  },
}
</script>

<template>
  <view class="headerNavigationBar row items-center justify-between">
    <view class="headerNavigationBar_headerContent allRowCenter" :style="{
      background: headerIndex === index ? '#FF4206' : '#FFFFFF'
    }" v-for="(item, index) in headerList" :key="index" @click.stop="selectIndex(index)">
      <text class="headerNavigationBar_headerContent_text" :style="{
        color: headerIndex === index ? '#FFFFFF' : '#4B4B4B'
      }">{{ item.title }}</text>
    </view>
  </view>
</template>

<style scoped lang="scss">
.headerNavigationBar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  .headerNavigationBar_headerContent {
    background: #FFFFFF;
    border-radius: 15rpx 15rpx 0rpx 0rpx;
    padding: 19rpx 0rpx;
    .headerNavigationBar_headerContent_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #4B4B4B;
    }
  }
}
</style>